<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>事件监听器</title>
    </head>
    <body>
        <div id="app">
            <!--可以使用 $event 传递事件-->
            <button @click="btnClick($event)">测试</button>
            <hr />
            <!-- 修饰符 -->
            <div @click="divClick">
                div
                <button @click="btnClick">冒泡</button>
                <!--阻止事件冒泡 event.stopPropagation() -->
                <button @click.stop="btnClick">阻止冒泡</button>

                <form action="event-example.html">
                    <!-- prevent 阻止默认事件 event.preventDefault() -->
                    <input type="submit" value="阻止默认事件提交" @click.prevent.stop="btnClick" />
                </form>

                <!-- 监听某个键帽的点击 .enter只监听 enter 键 -->
                <input type="text" @keyup.enter="keyUp" /> <br />

                <!-- 只调用一次 .once -->
                <button @click.stop.once="btnClick">只调用一次</button>
            </div>
        </div>
    </body>
    <script src="../js/vue.js" charset="utf-8"></script>
    <script type="text/javascript">
        const app = new Vue({
            el: '#app',
            data: {},
            methods: {
                btnClick(event) {
                    console.log('按钮点击', event);
                },
                divClick(event) {
                    console.log('div点击', event);
                },
                keyUp(event) {
                    console.log('输入', event)
                }
            }
        });
    </script>
</html>
